<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>登录</title>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
	<c:set var="path" value="<%=basePath%>"></c:set>
	<link href='${path }/images/admin/admin_index.png' rel='shortcut icon' type='image/x-icon'>
	<link href="${path}/css/bootstrap/bootstrap.min.css" rel="stylesheet" />

	<style type="text/css">
		body {
			background: url("images/admin/login_bg.jpg") no-repeat scroll 0px 0px
				transparent;
			background-size: 100%;
		}
		.container {
			width: 300px;
			height: 200px;
			margin-top: 100px;
		}
		.error-msg {
			color: red;
			font-size: 12px;
			display: none;
		}
	</style>

</head>
<body>
	<div class="container">
      <form class="form-signin"  action="registerpost"  method="post" id="res">
        <h2 class="form-signin-heading">注册</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
       	<input type=text id="inputUser" name="user_username" class="form-control" placeholder="用户名" required autofocus />
       	<label id="checkuser" style="color: red"></label>
        <br />
        <br />
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" name="user_password" class="form-control" placeholder="密  码" required />
       	<label class="error-msg"></label>
        <br />
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="pwd" name="pwd" class="form-control" placeholder="确认密码" required />
       	<label id="checkpwd" style="color: red"></label>
        <br />
        <br />
        <label for="inputPassword" class="sr-only">phone</label>
        <input type="text" id="phone" name="user_phone" class="form-control" placeholder="手机号" required />
       	<label id="checkphone" style="color: red"></label>
        <br />
        <br />
        <div id="phonebox" style="display: none;">
        <label for="inputPassword" class="sr-only">phone</label>
        <input type="text" id="code" name="code" class="form-control" style="width:100px;float: left;margin-right: 20px;margin-top: 5px" placeholder="验证码" required />
        <button class="btn btn-lg btn-primary btn-block"  type="button" style="width:150px;font-size: 15px" id="gaincode">获取验证码</button>
       	<label id="checkcode" style="color: red"></label>
       	</div>
        <br />
       <button class="btn btn-lg btn-primary btn-block" type="submit" id="checkres">提交</button>
      </form>
      <br /><a href="login">我已有账号！点击登录....</a>
    </div>

	<!-- js引入 -->
	<script src="${path}/js/jquery.js"></script>
	<script src="${path}/js/bootstrap/bootstrap.min.js"></script>
	<script src="${path}/js/login.js"></script>
	<script>
	/* 提交验证  */
	var f=[false,false,false,false];
	
		$(function(){
			/* 验证用户 */
			$("#inputUser").blur(function(){
				$.ajax({
					url:'checkuser',
					type:'post',
					data:{
						username:$("#inputUser").val(),
					},
					success:function(data){
						if(data){
							$("#checkuser").html("用户已被注册");
							f[0]=false;
						}else{
							$("#checkuser").html("");
							f[0]=true;
						}
					}
				});
			});
			var code;
			/* 验证密码 */
			$("#pwd").blur(function(){
				var pwd=$("#pwd").val();
				var inputPassword=$("#inputPassword").val();
				if(pwd!=inputPassword){
					$("#checkpwd").html("密码请输入一致");
					f[1]=false;
				}else{
					$("#checkpwd").html("");
					f[1]=true;
				}
			});
			$("#inputPassword").blur(function(){
				var pwd=$("#pwd").val();
				var inputPassword=$("#inputPassword").val();
				if(pwd!=inputPassword){
					$("#checkpwd").html("密码请输入一致");
					f[1]=false;
				}else{
					$("#checkpwd").html("");
					f[1]=true;
				}
			});
			/* 验证手机 */
			$("#phone").keyup(function(){
				$("#code").val("");
				code="";
				var pattern = /^0?(13|14|15|18|17)[0-9]{9}$/;
				var phone = $("#phone").val();
				if(pattern.test(phone)){
					$("#checkphone").html("");
					$.ajax({
						url:'checkphone',
						type:'post',
						data:{
							phone:phone,
						},
						success:function(data){
							if(data){
								$("#checkphone").html("手机已被注册");
								$("#phonebox").hide();
								f[2]=false;
							}else{
								$("#phonebox").show();
								f[2]=true;
							}
						}
					});
				}else{
					$("#checkphone").html("请输入正确的手机号");
					$("#code").val("");
					$("#phonebox").hide();
					f[2]=false;
				} 
			});
			
			/* 点击验证码 */
			 var clock = '';
			 var nums = 60;
			 var btn;
			 var index=true;
			$("#gaincode").click(function(){
				if(index){
					$.ajax({
						url:'gaincode',
						type:'post',
						data:{
							phone:$("#phone").val(),
						},
						success:function(data){
							if(data){
								code=data;
								 btn = $("#gaincode");
								 btn.disabled = true; //将按钮置为不可点击
								 btn.html(nums+'秒后可重新获取');
								 clock = setInterval(doLoop, 1000); //一秒执行一次
								 index=false;
							}
						}
					});
				}
				
			});
			function doLoop()
			 {
				 nums--;
				 if(nums > 0){
					  btn.html(nums+'秒后可重新获取');
				 }else{
					  clearInterval(clock); //清除js定时器
					  btn.disabled = false;
					  btn.html('获取验证码');
					  nums = 60; //重置时间
					  index=true;
				 }
			 }
			
			/* 验证验证码 */
			$("#code").blur(function(){
				var c = $("#code").val();
				$.ajax({
					url:'checkcode',
					type:"post",
					data:{
						code:c,
						phone:$("#phone").val(),
					},
					success:function(data){
						if(data){
							$("#checkcode").html("");
							f[3]=true;
						}else{
							$("#checkcode").html("请输入正确的验证码");
							f[3]=false;
						}
					}
				})
			});
			$("#checkres").click(function (e){
				alert(f)
				if(f[0]&&f[1]&&f[2]&&f[3]){
					return true;
				}else{
					return false;
		            e.preventDefault();
				}
			})
			
		});
		
	</script>
</body>
</html>